<template>
  <div class="devBox" style="width: calc(100vw - 280px);">
    <div class="table">
      <div class="option">
        <div class="noBlueBg">
          <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
            <el-form-item label="站点名称" prop="name">
              <el-input v-model="options.name" clearable placeholder="请输入站点名称" size="mini"></el-input>
            </el-form-item>

            <el-form-item label="ip地址" prop="ip">
              <el-input v-model="options.ip" clearable placeholder="请输入ip" size="mini"></el-input>
            </el-form-item>
            <!-- <el-form-item label="状态" prop="state">
              <el-input v-model="options.state" clearable placeholder="请选择状态" size="mini"></el-input>
            </el-form-item> -->
            <el-form-item label="生产厂商" prop="manufacturer">
              <el-input v-model="options.manufacturer" clearable placeholder="请输入生产厂商" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="managementContact">
              <el-input v-model="options.managementContact" clearable placeholder="请输入联系人" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="managementPhone">
              <el-input v-model="options.managementPhone" clearable placeholder="请输入联系电话" size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="loadList"><span class="el-icon el-icon-search"></span> 查询
              </el-button>
              <el-button size="mini" @click="resetOption('optionForm')"><span
                class="el-icon el-icon-refresh-left"></span> 重置
              </el-button>
            </el-form-item>
            <el-form-item class="floatRight">
              <el-button size="mini" type="success" @click="add"><span class="el-icon el-icon-plus"></span>新增
              </el-button>
              <el-button size="mini" type="success" @click="fzsf"><span class="el-icon el-icon-setting"></span>分组算法设置
              </el-button>
              <el-button size="mini" type="success" @click="cameraSortList"><span class="el-icon el-icon-sort"></span>摄像机排序
              </el-button>
              <!-- <el-button size="mini" type="warning" @click="downloadTab"><span
                class="el-icon el-icon-download"></span>下载表格模板
              </el-button>
              <el-button size="mini" type="warning" @click="importTab"><span class="el-icon el-icon-upload2"></span>导入设备表格
              </el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="list" :style="{height:listHeight+'px'}">
        <el-table
          :data="list"
          stripe
          border
          :height="listHeight"
          style="width: 100%">
          <el-table-column
            prop="ip"
            label="ip地址"
            align="center"
            width="110">
          </el-table-column>
          <el-table-column
            prop="name"
            label="站点名称"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="groupType"
            label="分组"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              {{scope.row.groupValue}}/{{getTypeName(scope.row.groupType)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="password"
            align="center"
            width="120"
            label="密码">
          </el-table-column>
          <el-table-column
            prop="manufacturer"
            label="设备产商"
            align="center"
            width="100">
          </el-table-column>
          <!-- <el-table-column
            prop="equipmentModel"
            align="center"
            width="120"
            label="设备型号">
          </el-table-column>

          <el-table-column
            prop="equipmentType"
            label="设备类型"
            align="center"
            width="110">
          </el-table-column> -->
          <el-table-column
            prop="resolution"
            align="center"
            label="分辨率"
            width="110">
          </el-table-column>
          <el-table-column
            prop="setTime"
            label="设站时间"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            align="center"
            label="更新年份"
            width="100">
          </el-table-column>
          <el-table-column
            prop="managementUnit"
            align="center"
            label="管理单位">
          </el-table-column>

          <el-table-column
          prop="switchs"
          label="运行状态"
          align="center"
          width="120">
          <template slot-scope="scope">
            <span class="point mr5" :class="scope.row.switchs?'switchs':'disable'"></span>
            {{scope.row.switchs?'启用':'停用'}}
          </template>
        </el-table-column>

          <el-table-column
            prop="managementContact"
            label="联系人"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="managementPhone"
            label="联系电话"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="stakeNo"
            label="桩号"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="installPosition"
            label="安装位置">
          </el-table-column>
          <el-table-column
            prop="longitude"
            align="center"
            label="经度"
            width="100">
          </el-table-column>

          <el-table-column
            prop="latitude"
            label="纬度"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="road"
            label="路线编码"
            align="center"
            width="110">
          </el-table-column>
          <el-table-column
            prop="electricityType"
            label="取电方式"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="height"
            label="高度"
            align="center"
            width="80">
          </el-table-column>
          <!-- <el-table-column
            prop="direction"
            align="center"
            label="方向"
            width="100">
          </el-table-column>

          <el-table-column
            prop="fvcSxjtype"
            label="F_VC_SXJTYPE"
            width="120">
          </el-table-column> -->




          <el-table-column
            fixed="right"
            label="操作"
            width="320">
            <template slot-scope="scope">
              <el-button @click="ysw(scope.row.id,scope.row)" type="primary" plain size="small">预设位</el-button>
              <el-button @click="sf(scope.row.id,scope.row)" type="primary" plain size="small">算法</el-button>
              <el-button @click="edit(scope.row)" type="primary" plain size="small">编辑</el-button>
              <el-button @click="del(scope.row.id)" type="warning" plain size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom" :style="{height: bottomHeight+'px'}">
        <div class="page noBlueBg">
          <el-pagination
            @size-change="changeSize"
            @current-change="changePage"
            :page-sizes="[20, 50, 100, 200]"
            :current-page="page"
            :page-size="limit"
            layout="sizes,total,prev, pager, next, jumper"
            :total="totals">
          </el-pagination>
        </div>
      </div>
    </div>






    <Dialog :cfg="dialogCfg" ref="dialog">
      <el-form :model="editUser" label-width="120px" :inline="true" :rules="rules" ref="addForm">
        <el-form-item label="ip地址" prop="ip">
          <el-input v-model="editUser.ip" clearable placeholder="请输入ip地址" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="站点名称" prop="name">
          <el-input v-model="editUser.name" clearable placeholder="请输入站点名称" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editUser.username" clearable placeholder="请输入用户名" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editUser.password" clearable placeholder="请输入密码" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="设备产商" prop="manufacturer">
          <el-input v-model="editUser.manufacturer" clearable placeholder="请输入设备产商" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="设备型号" prop="equipmentModel">
          <el-input v-model="editUser.equipmentModel" clearable placeholder="请输入设备型号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="equipmentType">
          <el-input v-model="editUser.equipmentType" clearable placeholder="请输入设备类型" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="分辨率" prop="resolution">
          <el-input v-model="editUser.resolution" clearable placeholder="请输入分辨率" size="mini"></el-input>
        </el-form-item>


        <el-form-item label="管理单位" prop="managementUnit">
          <el-input v-model="editUser.managementUnit" clearable placeholder="请输入管理单位" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="managementContact">
          <el-input v-model="editUser.managementContact" clearable placeholder="请输入联系人" size="mini"></el-input>
        </el-form-item><el-form-item label="联系电话" prop="managementPhone">
        <el-input v-model="editUser.managementPhone" clearable placeholder="请输入联系电话" size="mini"></el-input>
      </el-form-item>
        <el-form-item label="桩号" prop="stakeNo">
          <el-input v-model="editUser.stakeNo" clearable placeholder="请输入桩号" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="安装位置" prop="installPosition">
          <el-input v-model="editUser.installPosition" clearable placeholder="请输入安装位置" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="经度" prop="longitude">

          <el-input v-model="editUser.longitude" type="number"  placeholder="请输入经度" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="editUser.latitude"  type="number"  placeholder="请输入纬度" size="mini"></el-input>
        </el-form-item>


        <el-form-item label="路线编码" prop="road">
          <el-input v-model="editUser.road" clearable placeholder="请输入路线编码" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="取电方式" prop="electricityType">
          <el-input v-model="editUser.electricityType" clearable placeholder="请输入取电方式" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="高度" prop="height">
          <el-input v-model="editUser.height"  type="number"  placeholder="请输入高度" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-input v-model="editUser.direction" clearable placeholder="请输入方向" size="mini"></el-input>
        </el-form-item>
        <!-- <el-form-item label="F_VC_SXJTYPE" prop="fvcSxjtype">
          <el-input v-model="editUser.fvcSxjtype" clearable placeholder="请输入F_VC_SXJTYPE" size="mini"></el-input>
        </el-form-item> -->
        <el-form-item label="设站时间" prop="setTime">
          <el-date-picker
            v-model="editUser.setTime"
            value-format="yyyy-MM-dd"
            size="mini"
            type="date"
            placeholder="请选择设站时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新年份" prop="updateTime">
          <el-date-picker
            v-model="editUser.updateTime"
            value-format="yyyy-MM-dd"
            size="mini"
            type="date"
            placeholder="请选择更新年份">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="分组" prop="groupValue">
          <el-select v-model="editUser.groupType" placeholder="请选择" size="mini">
            <el-option
              v-for="(value,key) in groups"
              :key="key"
              :label="value"
              :value="key*1">
            </el-option>
          </el-select>
          <el-input v-model="editUser.groupValue" placeholder="请输入" size="mini" clearable></el-input>
        </el-form-item>

        <el-form-item label="rtsp" prop="videoAddress">
          <el-input v-model="editUser.videoAddress" clearable placeholder="请输入地址" size="mini"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>

    <Yswlog :cfg="yswDialogCfg" ref="dialog2">
      <el-row>
        <el-col :span="12">
          <!-- 左边表单 -->
            <el-form :model="yswData" label-width="160px" :inline="true" :rules="rules" ref="ysw1Form">
              
              <el-form-item label="轮巡方式" prop="lxfs" v-if="lxfsShow">
                <el-select v-model="yswData.lxfs" placeholder="请选择" size="mini" @change="handleSelect1Change" required>
                  <el-option
                    v-for="item in yswLxfs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item label="摄像机点token" prop="cameraJson" v-if="1==2">
                <el-input v-model="yswData.cameraJson"  type="text" size="mini" :disabled="true"></el-input>
              </el-form-item>
              
              
                <el-form-item label="时间节点" prop="sj" v-if="sjShow">
                  <el-time-picker v-model="yswData.sj" value-format="HH:mm:ss" size="mini" :disabled="isSelect1Disabled"
                  placeholder="任意时间点" required>
                  </el-time-picker>
                </el-form-item>
        
                <el-form-item label="间隔时间（分钟）" prop="sjjg" v-if="sjjgShow">
                  <el-input v-model="yswData.sjjg"  type="number" placeholder="请输入分钟" size="mini" :disabled="isSelect2Disabled" required></el-input>
                </el-form-item>

              <div id="divTest" style="height: 67px!important;">
              </div>

              <div style="height: 550px;margin-right: 10px;">
                <iframe ref="iframePage" :src="cameraUrl" width="780" height="550" style="border: none;">
              </iframe>
                <!-- <section class="main">
                  <onvif
                    :xaddr="connectData.xaddr"
                    :user="connectData.user"
                    :pass="connectData.pass"
                    :reConnect="false"
                    ref="onvif"
                    @connect="connect"
                    @presets="presets"
                    @setPresetCallback="setPresetCallback"
                    @close="close"
                    @error="error"
                    class="left"
                  />
                </section> -->
              </div>

              <div style="height: 40px;line-height: 40px;text-align: center;">
                <el-button size="mini" type="primary" @click="saveYsw" v-if="saveYswShow">保存</el-button>
                <!-- <el-button size="mini" @click="close(0)">关闭</el-button> -->
              </div>
            </el-form>
            <!-- 其他表单项 -->
          </el-form>
        </el-col>
        <el-col :span="12">
          <!-- 右边表格 -->
          <el-button size="mini" type="success" @click="addYsw" style="float: right;">新增预置点</el-button>

          <el-table :data="gridOldData" class="ysw" height="590">
            <el-table-column type="index" width="80" align="center"></el-table-column>
            <el-table-column property="id" width="20" v-if="1===2"></el-table-column>
            <el-table-column property="cameraJson" width="20" v-if="1===2"></el-table-column>
            <el-table-column property="name" label="预置点" width="180" align="center"></el-table-column>
            <el-table-column property="lxfs" label="轮巡方式" width="120" align="center"></el-table-column>
            <el-table-column property="sj" label="时间节点" width="120" align="center" v-if="gridOldData[0]?.lxfs=='时间节点'"></el-table-column>
            <el-table-column property="sjjg" label="时间间隔(分钟)"  width="120" align="center" v-if="gridOldData[0]?.lxfs=='时间间隔'"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="editYsw(scope.row.id, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="delYsw(scope.row.id, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </Yswlog>

    <CameraSort :cfg="cameraSortDialogCfg" ref="dialog3">
    </CameraSort>

    <Sflog :cfg="sfDialogCfg" ref="dialog4">
      <template>
        <div v-if="fzsfSelect">
        <label class="el-form-item__label" style="width: 120px;text-align: center;">摄像机分组</label>
        <el-select v-model="fzsfValue" placeholder="请选择" style="margin-bottom: 10px;" >
          <el-option
          v-for="(value,key) in groups"
          :key="key"
          :label="value"
          :value="key*1">
          </el-option>
        </el-select>
      </div>
        <el-form ref="sfForm" :model="sfData" label-width="120px">
          <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> -->
        <el-tabs v-model="sfValue" value="samDetect" type="border-card">
          <el-tab-pane v-for="(item,index) in sfData.sfList" :key="index" :label="item.trafficDictAlias" :name="item.trafficDictVal">
            <el-form-item label="是否启用">
              <el-switch v-model="item.disable" active-color="#13ce66"
              inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <div v-if="item.trafficDictAlias!='道路分割'">
              <el-form-item label="跳帧设置（秒）" >
                <div class="block" style="width: 400px;">
                  <el-slider v-model="item.frameSkip" show-input :step="5" :min="20" :max="300"></el-slider>
                </div>
              </el-form-item>
              <el-form-item label="检测次数">
                <div class="block" style="width: 400px;">
                  <el-slider v-model="item.duration" show-input :step="1" :min="1" :max="15"></el-slider>
                </div>
              </el-form-item>
              <el-form-item label="间隔时间（分）">
                <div class="block" style="width: 400px;">
                  <el-slider v-model="item.intervalTime" show-input :step="2" :min="2" :max="1440"></el-slider>
                </div>
              </el-form-item>
            </div>
            <div v-if="item.trafficDictAlias=='道路分割'" style="height: 186px;">
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
          <!-- <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
      </template>
    </Sflog>

  </div>
</template>

<script>

  import TableList from 'comp/common/TableList4';
  import Dialog from 'comp/common/Dialog.vue';
  import Yswlog from 'comp/common/Yswlog.vue';
  import CameraSort from 'comp/common/CameraSort.vue';
  import Sflog from 'comp/common/Sflog.vue';

  export default {
    name: "User",
    components: {
      Dialog,
      TableList,
      Yswlog,
      CameraSort,
      Sflog,
    },
    data() {
      return {
        nav: 'Dev',
        width: 480,
        height: 270,
        listHeight: 750,
        bottomHeight: 200,

        bscCameraId:'',
        gridOldData: [],
        gridData: [],

        unitName: this.$kkui.cache.get('unit'),
        groups: this.$kkui.cache.get('dict')['cameraGroup'],
        // trafficDict: this.$kkui.cache.get('dict')['trafficDict'],

        tabHeight: 0,
        options: {
          name: '',
          ip: '',
          manufacturer: '',
          managementContact: '',
          managementPhone: '',
        },
        list: [],
        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,

        column: [
          {
            prop: 'ip',
            label: 'ip地址'
          },
          {
            prop: 'name',
            label: '站点名称'
          },
          {
            prop: 'username',
            label: '用户名'
          },
          {
            prop: 'password',
            label: '密码'
          },

          {
            prop: 'manufacturer',
            label: '设备产商'
          },
          {
            prop: 'equipmentModel',
            label: '设备型号'
          },
          // {
          //   prop: 'equipmentType',
          //   label: '设备类型'
          // },
          {
            prop: 'resolution',
            label: '分辨率'
          },

          {
            prop: 'setTime',
            label: '设站时间'
          },

          {
            prop: 'updateTime',
            label: '更新年份'
          },

          {
            prop: 'managementUnit',
            label: '管理单位'
          },
          {
            prop: 'switchs',
            label: '状态',
            btn: 'switch',
          },
          {
            prop: 'managementContact',
            label: '联系人'
          },

          {
            prop: 'managementPhone',
            label: '联系电话'
          },


          {
            prop: 'stakeNo',
            label: '桩号'
          },
          {
            prop: 'installPosition',
            label: '安装位置'
          },

          {
            prop: 'longitude',
            label: '经度'
          },

          {
            prop: 'latitude',
            label: '纬度'
          },

          {
            prop: 'road',
            label: '路线编码'
          },
          {
            prop: 'electricityType',
            label: '取电方式'
          },

          {
            prop: 'height',
            label: '高度'
          },

          // {
          //   prop: 'direction',
          //   label: '方向'
          // },

          // {
          //   prop: 'fvcSxjtype',
          //   label: 'F_VC_SXJTYPE'
          // },

          // {
          //   prop: 'status',
          //   label: '状态',
          //   btn: 'switch',
          // },
          {
            prop: '',
            label: '操作',
            btn: 'editAndDel',
            del: (id) => {
              this.del(id)
            },
            edit: (data) => {
              this.edit(data)
            },
            ysw: (id,data) =>{
              this.ysw(id,data)
            },
            sf:(id,data) =>{
              this.ysw(id,data)
            },
          }
        ],
        dialogCfg: {},
        yswDialogCfg: {},
        cameraSortDialogCfg: {},
        sfDialogCfg: {},
        editUser: {
          ip: '',
          name: '',
          username: '',
          password: '',
          manufacturer: '',
          department: '',
          // equipmentModel: '',
          // equipmentType: '',
          resolution: '',

          managementUnit: '',
          managementContact: '',
          managementPhone: '',
          stakeNo: '',
          installPosition: '',
          longitude: '',
          latitude: '',
          road: '',
          height: '',
          // direction: '',
          // fvcSxjtype: '',
          setTime: '',
          updateTime: '',
          videoAddress:'',
          groupType:'',
          groupValue:''
        },
        rules: {
          ip: [
            {required: true, message: '请输入ip地址', trigger: 'change'}
          ],
          name: [
            {required: true, message: '请输入站点名称', trigger: 'change'}
          ],
          username: [
            {required: true, message: '请输入用户名', trigger: 'change'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'change'}
          ],
          manufacturer: [
            {required: true, message: '请输入设备型号', trigger: 'change'}
          ],

          equipmentModel: [
            {required: true, message: '请输入设备型号', trigger: 'change'}
          ],
          equipmentType: [
            {required: true, message: '请输入设备类型', trigger: 'change'}
          ],
          resolution: [
            {required: false, message: '请输入分辨率', trigger: 'change'}
          ],
          managementUnit: [
            {required: true, message: '请输入管理单位', trigger: 'change'}
          ],
          managementContact: [
            {required: true, message: '请输入联系人', trigger: 'change'}
          ],

          managementPhone: [
            {required: true, message: '请输入联系电话', trigger: 'change'}
          ],
          stakeNo: [
            {required: true, message: '请输入桩号', trigger: 'change'}
          ],
          installPosition: [
            {required: true, message: '请输入安装位置', trigger: 'change'}
          ],
          longitude: [
            {required: true, message: '请输入经度', trigger: 'change'}
          ],
          latitude: [
            {required: true, message: '请输入纬度', trigger: 'change'}
          ],

          road: [
            {required: true, message: '请输入路线编码', trigger: 'change'}
          ],
          electricityType: [
            {required: false, message: '请输入取电方式', trigger: 'change'}
          ],
          height: [
            {required: false, message: '请输入高度', trigger: 'change'}
          ],
          direction: [
            {required: true, message: '请输入方向', trigger: 'change'}
          ],
          // fvcSxjtype: [
          //   {required: true, message: '请输入F_VC_SXJTYPE', trigger: 'change'}
          // ],
          groupValue: [
            {required: true, message: '请输入分组', trigger: 'change'}
          ],

          lxfs: [
            {required: true, message: '请选择轮巡方式', trigger: 'change'}
          ],
          sj: [
            {required: true, message: '请选择时间节点', trigger: 'change'}
          ],
          sjjg: [
            {required: true, message: '请选择间隔时间', trigger: 'change'}
          ],
        },

        connectData: {
          xaddr: "",
          user: "",
          pass: "",
        },
        cameraUrl:"",
        tokenJson:[],
        yswData: {
          id:'',
          name:'',
          bscCameraId:'',
          lxfs:'',
          sj:'',
          sjjg:'',
          cameraJson:'',
          createTime:''
        },
        yswLxfs: [{
          value: '时间节点',
          label: '时间节点',
          disabled: false
        }, {
          value: '时间间隔',
          label: '时间间隔',
          disabled: false
        }],
        lxfsShow: false,
        sjShow: false,
        sjjgShow: false,
        saveYswShow: false,
        sfData: {
          sfList:[]
        },
        sfValue:'samDetect',
        fzsfValue:1,
        fzsfSelect:false,
      }
    },
    watch: {
      'yswData': function (newVal, oldVal) {
        // console.log(newVal.lxfs);
        this.handleSelect1Change(newVal.lxfs);
        // console.log(newVal);
        // console.log(oldVal);
        // 在这里处理属性变化
      }
    },
        // created() {
        //   setTimeout(() => {
        //     this.$refs.onvif.connect();
        //   }, 500)
        // },
    mounted() {
      this.initSize(this.loadList);

      window.addEventListener("message", this.handleMessage);
    },
    methods: {
      initSize(callback) {
        const W = window.screen.width, H = document.body.clientHeight;
        let headerHeight = 61;
        if (W <= 1400) {
          headerHeight = 51;
        }
        this.width = W / 4;
        this.height = this.width * 9 / 16;
        this.listHeight = (this.height - 20) * 3;
        this.bottomHeight = H - headerHeight - this.listHeight - 60-20;
        callback();
      },

      // 更新单位名
      renewUnitName() {
        if (!(this.unitName.trim())) {
          this.$kkui.alert({title: '出错啦！', cont: '当前单位名称为空！'});
          return false;
        }
        this.$sysServer.ServerRenewUnitName(this.unitName).then(data => {
          this.$kkui.cache.set('unit', this.unitName);
        })
      },

      //加载列表
      loadList() {
        this.$sysServer.ServerDevList({
          limit: this.limit,
          page: this.page,
          ...this.options
        }).then(data => {
          this.list = data['rows'].map(item => {
            return {
              ...item,
              status: item['status'] === '1',
            }
          });
          this.totals = data['total'];
          this.$kkui.loading_deepBlue.hide();
        })
      },

      //加载预设位列表
      loadYswList(id) {
        this.$sysServer.ServerCameraYswList({
          'bscCameraId': id
        }).then(data => {

          this.gridData = data;
          this.gridOldData = data;
          // console.log(this.gridData.length);
          if (this.gridOldData[0]?.lxfs === "时间节点") {
            this.yswLxfs[1].disabled = true
            this.yswLxfs[0].disabled = false
          } else if (this.gridOldData[0]?.lxfs === "时间间隔") {
            this.yswLxfs[0].disabled = true
            this.yswLxfs[1].disabled = false
          }
        })
      },

    // 向iframe传值的方法  @param {Object} data
    sendMessage(data){
        const iframe = this.$refs.iframePage.contentWindow;
        var url = 'http://' + location.hostname+':'+location.port+'/#/camera';
        iframe.postMessage(data, url);
        iframe.onload = function(){
          // iframe.contentWindow.postMessage(data, url);
          // iframe.contentWindow.postMessage(data, url);
        }
    },
    // 监听子页面传过来的值的方法  @param {Object} event
    handleMessage (event) {
        // dosomething
        this.tokenJson = event.data;
        //console.log(this.tokenJson);
    },

      //预设位
      ysw(id,data) {
        var currentTime = new Date().getTime();
        this.cameraUrl = "about:blank"
        setTimeout(() => {
          this.connectData =  {
          xaddr: data.ip,
          user: data.username,
          pass: data.password,
        },
          this.cameraUrl = '//' + location.hostname+':'+location.port+'/#/camera?xaddr='+data.ip+'&user='+data.username+'&pass='+data.password+'&timestamp='+currentTime+"&rtsp="+data.videoAddress.replace("&", "%26");
          // this.sendMessage(this.connectData,this.cameraUrl);
        }, 100)

        this.bscCameraId = id;//赋值预设位的相机id
        this.yswLxfs[0].disabled = false
        this.yswLxfs[1].disabled = false
        this.loadYswList(id);
        this.lxfsShow = false;
        this.sjShow = false;//隐藏时间节点选择器
        this.sjjgShow = false;//隐藏时间间隔选择器
        this.saveYswShow = false;//显示保存按钮
        this.loadYswData();
        document.getElementById("divTest").style.display = "";
        this.yswDialogCfg = {
          title: '预设位设置',
          closeShow: true,
          footerShow: true,
          width: 1600,
          height: 800,
          bg: true,
        };
        this.$refs.dialog2.show = true;
      },

      handleSelect1Change(value) {
        // 当选择特定值时，可以隐藏select2
        this.sjShow = value === '时间节点';//显示时间节点选择器
        this.isSelect2Disabled = value === '时间节点';//禁用时间间隔选择
        this.sjjgShow = value === '时间间隔';//显示时间间隔选择器
        this.isSelect1Disabled = value === '时间间隔';//禁用时间节点选择器
      },

      //新增预置点
      addYsw() {
        document.getElementById("divTest").style.display = "none";
        // console.log(this.ptzProfiles);
        this.lxfsShow = true;
        this.sjShow = false;//隐藏时间节点选择器
        this.sjjgShow = false;//隐藏时间间隔选择器
        this.saveYswShow = true;//显示保存按钮
        this.loadYswData();
        this.yswData.bscCameraId = this.bscCameraId;

        //处理json获取列表中token值
        var tokenList = [];
        for (var i = 0; i < this.tokenJson.length; i++) {
          tokenList.push(this.tokenJson[i].token);
        }
        var cameraJsonList = [];
        for (var i = 0; i < this.gridData.length; i++) {
          cameraJsonList.push(this.gridData[i].cameraJson);
        }
        //如果右侧列表为空则获取tokenlist第一条数据
        if(cameraJsonList.length==0 && tokenList.length>0){
          this.yswData.cameraJson = tokenList[0];
        }
        //如果右侧列表有数据则对比tokenList进行赋值
        if(cameraJsonList.length>0 && tokenList.length>0){
          for(let token of tokenList){
            if(cameraJsonList.includes(token)){
              // console.log(token);
            }else{
              console.log("不存在的"+token);
              this.yswData.cameraJson = token;
              break;
            }
          }

        }else{
          console("赋值失败检查tokenList");
          return false
        }
        // console.log(tokenList);
        // console.log(cameraJsonList);
      },

      //初始化左边表格数据
      loadYswData() {
        this.yswData = {
          id:'',
          name:'',
          bscCameraId:'',
          lxfs:'',
          sj:'',
          sjjg:'',
          cameraJson:'',
          createTime:''
        }
      },

      
      //编辑预置点
      editYsw(id,data) {
        document.getElementById("divTest").style.display = "none";
        this.lxfsShow = true;
        this.saveYswShow = true;//显示保存按钮
        this.$sysServer.ServerCameraYswById({
          'id': id
        }).then(data => {
          this.yswData = data;
          this.sendMessage("cameraJson="+this.yswData.cameraJson);
        })
      },

      //保存预置点
      saveYsw() {
        var bscCameraId = this.bscCameraId;
        this.$refs['ysw1Form'].validate((valid) => {
          if (valid) {
            console.log(this.yswData);
            this.$sysServer.ServerAddCameraYsw(this.yswData).then(data => {
              this.$kkui.msg({
                icon: 1,
                cont: '保存成功！'
              });
              this.lxfsShow = false;
              this.sjShow = false;//隐藏时间节点选择器
              this.sjjgShow = false;//隐藏时间间隔选择器
              this.saveYswShow = false;//显示保存按钮
              this.sendMessage("saveCameraJson=" + this.yswData.cameraJson);
              this.loadYswData();
              document.getElementById("divTest").style.display = "";
              this.loadYswList(bscCameraId);
              // this.loadList();
              // this.initEditData();
              typeof callback === 'function' && callback();
            });
          } else {
            return false;
          }
        });
      },

      //删除预置点
      delYsw(id,data) {
        var bscCameraId = this.bscCameraId;
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此条数据吗？',
          callback: () => {
            this.$sysServer.ServerDelYswById([id * 1]).then(data => {
              this.$kkui.msg({
                icon: '1',
                cont: '删除成功！'
              });
              this.loadYswList(bscCameraId);
            })
          }
        });
      },

      formatDate(row, column) {
        let data = row[column.property];
         return this.formatDate1("HH:MM:SS",data);
      },

      formatDate1(fmt, datestr) {
        var date = new Date(datestr);
        // console.log(date);
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      },

      cameraSortList(){
        this.cameraSortDialogCfg = {
          title: '摄像机排序',
          closeShow: true,
          footerShow: true,
          width: 1100,
          height: 500,
          bg: true,
          // submit: (callback) => {
          //   this.$refs['addForm'].validate((valid) => {

          //     if (valid) {
          //       this.$sysServer.ServerAddDevTab(this.editUser).then(data => {
          //         this.$kkui.msg({
          //           icon: 1,
          //           cont: '新增成功！'
          //         });
          //         this.loadList();
          //         this.initEditData();
          //         typeof callback === 'function' && callback();
          //       });
          //     } else {
          //       return false;
          //     }
          //   });
          // }
        };
        this.$refs.dialog3.show = true;
      },


      //算法设置
      // handleClick(tab, event) {
      //   console.log(tab, event);
      // },

      //算法设置
      sf(id,data) {
        this.fzsfSelect = false;
        //重置点击tab位置
        this.sfValue = "samDetect";
        this.$sysServer.ServerCameraAiById({
          'bscCameraId': id
        }).then(data => {
          this.sfData.sfList=data;
          // console.log(data);
        })

        this.sfDialogCfg = {
          title: '算法设置',
          closeShow: true,
          footerShow: true,
          width: 870,
          height: 435,
          bg: true,
          submit: (callback) => {
            this.$refs['sfForm'].validate((valid) => {
              if (valid) {
                this.$sysServer.ServerUpdateCameraAi(this.sfData.sfList).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '保存成功！'
                  });
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          },
        };
        this.$refs.dialog4.show = true;

      },

      //分组算法设置
      fzsf(id,data) {
        this.fzsfSelect = true;
        //重置点击tab位置
        this.sfValue = "samDetect";
        this.$sysServer.ServerCameraAiById({
          'bscCameraId': 'admin'
        }).then(data => {
          this.sfData.sfList=data;
          // console.log(data);
        })

        this.sfDialogCfg = {
          title: '算法设置',
          closeShow: true,
          footerShow: true,
          width: 970,
          height: 485,
          bg: true,
          submit: (callback) => {
            this.$refs['sfForm'].validate((valid) => {
              if (valid) {
                this.$sysServer.ServerUpdateCameraAiList({
                  fzId:this.fzsfValue,
                  jsonData:this.sfData.sfList
                }).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '保存成功！'
                  });
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          },
        };
        this.$refs.dialog4.show = true;

      },

      //新增设备
      add() {
        this.initEditData();
        this.dialogCfg = {
          title: '新增设备',
          closeShow: true,
          footerShow: true,
          width: 1080,
          height: 700,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {

              if (valid) {
                this.$sysServer.ServerAddDevTab(this.editUser).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '新增成功！'
                  });
                  this.loadList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },

      //编辑设备
      edit(data) {
        this.editUser = {...data};
        this.dialogCfg = {
          title: '编辑设备',
          closeShow: true,
          footerShow: true,
          width: 1080,
          height: 700,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$sysServer.ServerUpdataDevTab(this.editUser).then(data => {
                  this.loadList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },

      //删除用户
      del(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此条数据吗？',
          callback: () => {
            this.$sysServer.ServerDelDevTab([id * 1]).then(data => {
              this.$kkui.msg({
                icon: '1',
                cont: '删除成功！'
              });
              this.loadList();
            })
          }
        });
      },

      initEditData() {
        this.editUser = {
          ip: '',
          name: '',
          username: '',
          password: '',
          manufacturer: '',
          department: '',
          equipmentModel: '',
          equipmentType: '',
          resolution: '',

          managementUnit: '',
          managementContact: '',
          managementPhone: '',
          stakeNo: '',
          installPosition: '',
          longitude: '',
          latitude: '',
          road: '',
          height: '',
          direction: '',
          fvcSxjtype: '',
          setTime: '',
          updateTime: '',
        };
      },

      // 下载模板
      downloadTab() {
        const index = this.$kkui.loading.show();
        this.$sysServer.ServerDownloadTmeplate('equipment').then(data => {
          const a = document.createElement('a');
          a.href = data;
          a.style.display = 'none';
          a.target = '_blank';
          a.download = '设备表' + '.xls';
          a.click();
          setTimeout(() => {
            this.$kkui.loading.hide(index);
          }, 3000)
        })
      },

      getTypeName(code){
        return this.groups[code]
      },

      //导入用户表
      importTab() {
        this.$kkui.submit({
          title: '上传设备表格',
          file: true,
          cont: '1'
        }, formData => {
          this.$kkui.alert({
            icon: 0,
            cont: '导入表格将会替换掉原先数据，确定吗？',
            callback: () => {
              this.$sysServer.ServerImportDevTab(formData).then(data => {

              })
            }
          })
        })
      },


      //切换分页
      changePage(page) {
        this.page = page;
        this.loadList();
      },

      changeSize(limit) {
        this.limit = limit;
        this.loadList();
      },

      // 重置option
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadList();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";
  /deep/ span.point{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #00D936;
    border-radius: 50%;

    &.disable{
      background-color: #ccc;
    }
  }
  
  .page{text-align: center;}
  /* /deep/ .ysw table tr th{text-align: left!important;} */
  /deep/ table th{text-align: center!important;}
  /deep/ table td{font-size: 12px;}

  /deep/ .myDialog-cont .el-form-item__content{width: 160px!important;}
  /deep/ .myDialog-cont .el-date-editor.el-input, /deep/ .myDialog-cont .el-date-editor.el-input__inner{width: auto}
  /deep/ .el-input__inner[type='number']{ padding-right: 0!important;}
  
  .main {
  display: flex;
  .left {
    flex: 1;
  }
  .right {
    width: 180px;
    height: 100%;
    &.list {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      .presets {
        overflow-y: auto;
      }
      .group {
        margin-bottom: 5px;
        display: flex;
        div {
          width: 68px;
          text-align: right;
          color: #fff;
          line-height: 30px;
          font-size: 12px;
          padding-right: 8px;
        }
      }
      ::v-deep {
        .el-button--small {
          padding: 6px 15px;
        }
      }
    }
  }
}
</style>
